
import {defineComponent,PropType} from "vue"
import "./index.less"
export interface meau{ 
  type:number,
  icon:string,
  name:string
}
export default defineComponent({
    emits:{
      "mouseenter":null,
      "click":null
    },
    inheritAttrs: false,
    props:{
      barData:{
        type:Array as PropType<meau[]>,
        required:true
      },
    },
    setup(props,ctx){
      const mouseleave=()=>{
        ctx.emit("mouseenter",false)
      }
      const mouseenter=(e:any,item:any)=>{
          e.stopPropagation();
          ctx.emit("mouseenter",item)
      }
      return ()=>(<div class="flex meau-tab" onMouseleave={mouseleave} >
        {props.barData.map(item=>{
          return <div class="center meau-item" onMouseenter={(e)=>mouseenter(e,item)} onClick={()=>ctx.emit("click",item)}>
              <Icon-font type={item.icon} style={{ color: '#fff', fontSize: '20px' }} />
              <div style={{marginTop:"5px"}} >{item.name}</div>
            </div>
        })}
    </div>)
    }
})
